<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:272px;">
                    <div class="user-info">
                        <img :src='userInfo.userAvatar' title="个人中心" @click="personalInfo" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{userInfo.userName}}</div>
                            <div v-show="userInfo.userRole!='-1'">{{userInfo.userRole == 'user' ? '普通用户':(userInfo.userRole=='admin'? '管理员':'维护者')}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        学号：
                        <span>{{userInfo.studentID}}</span>
                    </div>
                    <div class="user-info-list">
                        学院：
                        <span>{{userInfo.college}}</span>
                    </div>
                    <div class="user-info-list">
                        专业：
                        <span>{{ userInfo.major }}</span>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height:300px;">
                    <div slot="header" class="clearfix">
                        <span>我的</span>
                    </div>
                    <div>
                        <div>
                            <el-button type="primary" icon="el-icon-s-order" @click="contestRecord">参赛记录<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                        </div>
                        <div style="margin-top: 10%;">
                            <el-button type="primary" icon="el-icon-s-order" @click="questionRecord">答题记录<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                        </div>
                        <div style="margin-top: 10%;">
                            <el-button type="primary" @click="practice" icon="el-icon-edit">练习答题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card shadow="hover" style="height:603px;">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="竞赛列表" name="first">
                            <el-table
                                :data="tableData"
                                border
                                class="table"
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                            >
                            <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                            <el-table-column prop="contestName" label="比赛名称"></el-table-column>
                            <el-table-column prop="startTime" label="开始时间"></el-table-column>
                            <el-table-column prop="endTime" label="结束时间"></el-table-column>
                            <el-table-column prop="answerTimes" label="单人可答题次数"></el-table-column>
                            <el-table-column prop="time" label="限时（单位s）"></el-table-column>
                            <el-table-column label="题型">
                                <template slot-scope="scope">
                        <p :key="item" v-for = "item in scope.row.questionNum">{{item.type}} : {{ item.count }}</p>
                    </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-info"
                                    @click="handleShow(scope.$index, scope.row)"
                                >查看</el-button>
                            </template>
                        </el-table-column>

                            </el-table>
                            <div class="pagination">
                                <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page="query.current"
                                    :page-size="query.pageSize"
                                    :total="pageTotal"
                                    @current-change="handlePageChange"
                                ></el-pagination>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="公告" name="second">
                            <el-table
                                :data="noticeData"
                                border
                                class="table"
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                            >
                            <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                            <el-table-column prop="title" label="标题"></el-table-column>
                            <el-table-column prop="description" label="简介"></el-table-column>
                            <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-info"
                                    @click="handleShowNotice(scope.$index, scope.row)"
                                >查看</el-button>
                                </template>
                            </el-table-column>

                            </el-table>
                            <div class="pagination">
                                <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page="noticeQuery.current"
                                    :page-size="noticeQuery.pageSize"
                                    :total="noticePageTotal"
                                    @current-change="handlePageChange"
                                ></el-pagination>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="公告内容" :visible.sync="contentVisible" width="50%">
            <el-card style="margin-bottom: 2%;">
                <p style="margin-bottom: 2%;">标题：</p>
                <div v-html="this.curForm.title" class="ql-editor"></div>
            </el-card>
            <el-card style="margin-bottom: 2%;">
                <p style="margin-bottom: 2%;">简介：</p>
                <div v-html="this.curForm.description" class="ql-editor"></div>
            </el-card>
            <el-card>
                <p style="margin-bottom: 2%;">内容：</p>
                <div v-html="this.curForm.content" class="ql-editor"></div>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
import { InfiniteScroll } from "element-ui"
import { getNoticeList, getLoginUser,getContestList } from '../../api';
       
export default {
    name: 'dashboard',
    directives: {
        	"infinite-scroll": InfiniteScroll,
     },
    data() {
        return {
            activeName: 'first',
            name: '未登录',
            query: {
                current: 1,
                pageSize: 5,
            },
            noticeQuery: {
                current: 1,
                pageSize: 5,
            },
            curForm:'',
            tableData: [],
            noticeData:[],
            contentVisible:false,
            pageTotal: 0,
            noticePageTotal: 0,
            userInfo:{
                userRole:'-1',
                userName:'未登录',
                userAvatar:'https://tse3-mm.cn.bing.net/th/id/OIP-C.q1_lxgBodQG9LKZuE1pAfwHaHa?pid=ImgDet&rs=1',
            }
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            return this.name === this.userInfo.userRole
        },
    },
    created() {
        this.getList()
        getLoginUser().then(response => {
            console.log('dashborad')
            console.log(response)
            if(response.code != 0){
                
            }else{
                let res = response.data
                this.userInfo=res
                if(this.userInfo.userAvatar=="" || this.userInfo.userAvatar==null){
                    this.userInfo.userAvatar='https://tse3-mm.cn.bing.net/th/id/OIP-C.q1_lxgBodQG9LKZuE1pAfwHaHa?pid=ImgDet&rs=1'
                }
                if(this.userInfo.userName=="" || this.userInfo.userName==null){
                    this.userInfo.userName='无名氏'
                }
            }
        })
    },
    methods: {
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        },
        handleShow(index, row) {
            console.log(row)
            this.$router.push({path:'/examMsg',query:{row:row}})
        },
        handleShowNotice(index, row) {
            this.contentVisible=true
            this.curForm=row
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        practice(){
            if(this.userInfo.userRole == '-1'){
                this.$message.error('未登录，请先登录！')
                this.$router.push('/login')
            }else {
                this.$router.push('/question_type')
            }
            
        },
        personalInfo(){
            this.$router.push('/personalInfo');
        },
        contestRecord(){
            this.$router.push('/contest_records');
        },
        questionRecord(){
            this.$router.push('/question_records');
        },
        //渲染列表
      getList() {
        getContestList(this.query).then(response => {
            if(response.code != 0){
                    this.$message.error(response.message)
            }else{
                let res = response.data
                this.tableData = res.records;
                this.pageTotal = res.total;
            }
        });
        getNoticeList(this.noticeQuery).then(response => {
            if(response.code != 0){
                    this.$message.error(response.message)
            }else{
                let res = response.data
                this.noticeData = res.records;
                this.noticePageTotal = res.total;
            }
            
        });
      },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'current', val);
            this.getList();
        }
    }
};
</script>


<style scoped>
.loading{
    text-align: center;
}
.loading span {
  display: inline-block;
  width: 35px;
  margin: 0 auto;
  height: 35px;
  border: 3px solid #409eff;
  border-left: transparent;
  animation: zhuan 0.5s linear infinite;
  border-radius: 50%;
}
@keyframes zhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    cursor:pointer;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
